<template>
  <view v-if="object.title" class="select-area">
    <view class="select-title">
      <view>{{ object.title || "" }}</view>
      <view class="tag-box" @click="modelShow = true">
        <image
          src="/static/img/warning.png"
          style="width: 100%; height: 100%"
        ></image>
      </view>
    </view>
    <view class="select-content">
      <view class="img-box">
        <image
          :src="ylImgUrl"
          mode="aspectFill"
          style="width: 100%; height: 100%"
        />
      </view>
      <view class="input-box">
        <view class="input-title">预览</view>
        <view class="input-content" :style="{ fontFamily: selectData }">{{
          logoVal
        }}</view>
      </view>
    </view>
    <view class="title-two">logo类型</view>
    <view class="button-area">
      <view
        :class="[
          'button-area-item',
          { 'button-area-item-active': selectedBtn === 'wz' },
        ]"
        @click="btnSelectEvent('wz')"
        >文字</view
      >
      <view
        :class="[
          'button-area-item',
          { 'button-area-item-active': selectedBtn === 'dh' },
        ]"
        @click="btnSelectEvent('dh')"
        >队徽</view
      >
      <!-- <view
        :class="[
          'button-area-item',
          { 'button-area-item-active': selectedBtn === 'ip' },
        ]"
        @click="btnSelectEvent('ip')"
        >品牌IP</view
      > -->
    </view>
    <view v-if="selectedBtn === 'wz'" class="input-area">
      <u--input
        placeholder="请输入你想要显示的文字"
        maxlength="15"
        border="surround"
        v-model="logoVal"
        @change="logoChangeEvent"
      >
        <template slot="suffix">
          <view style="color: #cacaca">{{ logoVal.length + "/15" }}</view>
        </template>
      </u--input>
    </view>
    <!-- <view v-if="selectedBtn === 'wz'" class="select-input-area">
      <view class="left-box">字体</view>
      <view class="right-box">
        <uni-data-select
          v-model="selectData"
          :localdata="ztList"
          @change="selectChange"
          placement="top"
        ></uni-data-select>
      </view>
    </view> -->
    <view v-if="selectedBtn === 'dh'" class="file-upload">
      <u-upload
        :fileList="logPic ? [{ url: logPic }] : []"
        width="150"
        height="150"
        maxCount="1"
        @afterRead="afterReadEvent"
        @delete="deleteEvent"
      >
        <view class="plus-box">
          <u-icon name="plus" color="#000" size="60rpx" bold></u-icon>
        </view>
      </u-upload>
      <view class="tag-box">
        点击此处上传您的队徽<br />尺寸：70*70大小：2M
      </view>
    </view>
    <u-modal :show="modelShow" :title="object.title + '定制说明'">
      <view class="model-content">{{ explain }}</view>
      <template slot="confirmButton">
        <view class="close-btn" @click="modelShow = false">关闭</view>
      </template>
    </u-modal>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>
<script>
export default {
  name: "selectArea",
  props: {
    object: {
      type: Object,
      default: () => {},
    },
    ztList: {
      type: Array,
      default: () => [],
    },
    explain: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      modelShow: false,
      selectedBtn: "wz",
      logoVal: "",
      selectData: "黑体",
      // range: [
      //   { value: "楷体", text: "楷体" },
      //   { value: "宋体", text: "宋体" },
      //   { value: "仿宋", text: "仿宋" },
      // ],
      logPic: "",
      ylImgUrl: "",
    };
  },
  mounted() {},
  methods: {
    sureEvent() {
      this.$emit("selectColor", {
        color: this.object.colorList[this.activeIndex],
        id: this.object.id,
      });
      this.popupShow = false;
    },
    btnSelectEvent(id) {
      if (id !== "wz") {
        this.logoVal = "";
      }
      this.selectedBtn = id;
      this.$emit("selectBtn", {
        id: id,
      });
    },
    selectChange(e) {
      this.ylImgUrl = this.ztList.find((item) => item.value == e).pic;
      this.$emit("ztChange", {
        value: this.ztList.find((item) => item.value == e).value,
      });
    },
    afterReadEvent(e) {
      console.log(e);

      if (e.file.type !== "image") {
        return this.$refs.uToast.show({
          message: "请上传图片文件",
          type: "error",
          duration: 2000,
        });
      }
      this.logPic = e.file.url;
      this.$util.uploadImgs(
        e.file.url,
        {
          url: "upload/image",
          name: "multipart",
          model: "product",
          pid: 6,
        },
        (res) => {
          uni.hideLoading();
          uni.$emit("logoPic", res.data.url);
        },
        (err) => {
          uni.hideLoading();
        }
      );
    },
    deleteEvent() {
      this.logPic = "";
    },
    logoChangeEvent() {
      this.ylImgUrl = this.ztList.find(
        (item) => item.value == this.selectData
      ).pic;
      this.$emit("inputChange", this.logoVal);
    },
  },
};
</script>
<style lang="scss" scoped>
.select-area {
  padding: 20rpx;
  .select-title {
    color: #222;
    font-size: 30rpx;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 40rpx 0;
    .tag-box {
      margin-left: 20rpx;
      width: 40rpx;
      height: 40rpx;
    }
  }
  .title-two {
    color: #8c8c8c;
    font-size: 28rpx;
    margin-bottom: 30rpx;
  }
  .button-area {
    display: flex;
    align-items: center;
    // justify-content: space-between;
    margin-bottom: 40rpx;
    .button-area-item {
      width: 30%;
      border-radius: 8rpx;
	  margin-right:30rpx;
      padding: 25rpx 0;
      text-align: center;
      color: #fff;
      background-color: #ebebeb;
      color: #9a9a9a;
      margin-right: 30rpx;
    }
    .button-area-item-active {
      background-color: #000;
      color: #fff;
    }
  }
  .tag-content {
    min-width: 300rpx;
  }
  .select-content {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    .img-box {
      width: 150rpx;
      height: 150rpx;
      border: 1px solid #ccc;
      border-radius: 20rpx;
      margin-right: 20rpx;
      overflow: hidden;
    }
    .input-box {
      position: relative;
      flex: 1;
      min-height: 130rpx;
      border: 1px solid #e1e1e1;
      background-color: #f9f9f9;
      border-radius: 20rpx;
      padding: 10rpx 20rpx;
      display: flex;
      flex-direction: column;
      .input-title {
        font-size: 26rpx;
        color: #cacaca;
      }
      .input-content {
        font-size: 46rpx;
        color: #000;
        text-align: center;
        font-weight: 600;
      }
    }
  }
}
.select-input-area {
  margin-top: 40rpx;
  display: flex;
  .left-box {
    width: 120rpx;
    border: 1px solid #e0e0e0;
    text-align: center;
    padding: 20rpx 0;
    border-radius: 10rpx 0 0 10rpx;
  }
  .right-box {
    flex: 1;
  }
}
.file-upload {
  display: flex;
  .plus-box {
    width: 150rpx;
    height: 150rpx;
    border: 1px solid #e0e0e0;
    border-radius: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tag-box {
    display: flex;
    align-items: center;
    margin-left: 40rpx;
    font-size: 28rpx;
    color: #c0c4cc;
    line-height: 2;
  }
}
.close-btn {
  margin: 0 auto;
  color: #fff;
  text-align: center;
  padding: 15rpx 0;
  width: 160rpx;
  background: #000000;
  border-radius: 44rpx;
}
::v-deep .u-modal__title {
  font-size: 34rpx !important;
  font-weight: normal !important;
  color: #1c1c1c !important;
}
::v-deep .u-input {
  padding: 20rpx 10rpx !important;
}
::v-deep .uni-select {
  height: 80rpx !important;
  border-left: transparent !important;
  border-color: #e0e0e0 !important;
  border-radius: 0 10rpx 10rpx 0 !important;
}
::v-deep .u-upload {
  flex: none !important;
}
::v-deep .uicon-close {
  font-size: 20rpx!important;
  line-height: none!important;
}
.model-content {
  margin-top: 20rpx;
}
</style>
